﻿<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link th:href="@{/front-resource/css/style.css}" type="text/css" rel="stylesheet" />
  <!-- Favicon -->
  <!-- Favicon and Touch Icons -->
  <link th:href="@{/front-resource/images/favicon.png}" rel="shortcut icon" type="image/png}">
  <link th:href="@{/front-resource/images/apple-touch-icon.png}" rel="apple-touch-icon">
  <link th:href="@{/front-resource/images/apple-touch-icon-72x72.png}" rel="apple-touch-icon" sizes="72x72">
  <link th:href="@{/front-resource/images/apple-touch-icon-114x114.png}" rel="apple-touch-icon" sizes="114x114">
  <link th:href="@{/front-resource/images/apple-touch-icon-144x144.png}" rel="apple-touch-icon" sizes="144x144">
  <title>Listri - Directory & Listing HTML Template</title>
</head>
<body>
<!-- Start Main Menu Area -->
<div th:replace="/common/frontCommon::header"></div>
<!-- End Main Menu Area -->

<section>
  <!-- Slider main container-->
  <div class="swiper-container detail-slider slider-gallery" >
    <!-- Additional required wrapper-->
    <div class="swiper-wrapper" >
      <!-- Slides-->
      <div class="swiper-slide" th:each="hotelImage:${hotelImages}" style="width:643px ;height:422px "><a data-toggle="gallery-top" title="Our street"><img th:src="@{'/img/hotel/ '+${hotelImage.imageName}}" style="width: 100%;height: 100%"  class="img-fluid"></a></div>

    </div>
    <div class="swiper-pagination swiper-pagination-white"></div>
    <div class="swiper-button-prev swiper-button-white"></div>
    <div class="swiper-button-next swiper-button-white"></div>
  </div>
</section>



<section class="pt80 pb80 listingDetails">
  <div class="container">
    <div class="row">
      <div class="col-lg-8">
        <!-- About Listing-->

        <div class="text-block">
          <p class="text-primary"><i class="fa-map-marker-alt fa mr-1"></i><span th:text="${hotel.hotelLocation}"></span></p>
          <h1 th:text="${hotel.hotelName}"></h1>

          <div class="text-block">
            <h3 class="mb-4">房间设施</h3>
            <div class="row">
              <div class="col-md-6">
                <ul class="list-unstyled text-muted">
                  <li class="mb-2"><i class="fa fa-wifi text-secondary w-1rem mr-3 text-center"></i> <span class="text-sm">Wifi</span></li>
                  <li class="mb-2"><i class="fa fa-tv text-secondary w-1rem mr-3 text-center"></i> <span class="text-sm">液晶电视</span></li>
                  <li class="mb-2"><i class="fa fa-snowflake text-secondary w-1rem mr-3 text-center"></i> <span class="text-sm">空调</span></li>
                  <li class="mb-2"><i class="fa fa-thermometer-three-quarters text-secondary w-1rem mr-3 text-center"></i> <span class="text-sm">温度计</span></li>
                </ul>
              </div>
              <div class="col-md-6">
                <ul class="list-unstyled text-muted">
                  <li class="mb-2"><i class="fa fa-bath text-secondary w-1rem mr-3 text-center"></i><span class="text-sm">浴室</span></li>
                  <li class="mb-2"><i class="fa fa-utensils text-secondary w-1rem mr-3 text-center"></i><span class="text-sm">厨房</span></li>
                  <li class="mb-2"><i class="fa fa-laptop text-secondary w-1rem mr-3 text-center"></i><span class="text-sm">工作桌</span></li>
                  <li class="mb-2"><i class="fa fa-tshirt text-secondary w-1rem mr-3 text-center"></i><span class="text-sm">洗衣机</span></li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <div class="text-block">
          <!-- Gallery-->
          <h3 class="mb-4">房间一览</h3>
          <div class="row gallery ml-n1 mr-n1" >
            <div class="col-lg-4 col-6 px-1 mb-2" th:each="room:${rooms}" style="height: 245px;width: 173px">
              <a href="javascript:(0)" th:onclick="bookRoomInfo([[${room.roomId}]],[[${room.roomType}]],[[${room.roomPrize}]]);">
                <img th:src="@{'/img/room/'+${room.roomImageName}}" class="img-fluid" style="width: 100%;height: 100%">
                <div style="margin-top: 10px;">
                  <span th:text="${room.roomType}" style="margin-left: 10%"></span>
                  <span th:text="${room.roomPrize}+'元/晚'" style="margin-left: 5%;color: #9e0505"></span>
                  <span style="margin-left: 10%" th:attr="class=${room.roomSign==0?'Rclosed':'Ropen'}" th:text="${room.roomSign==0?'已满':'未满'}"></span>
                </div>
              </a>
            </div>
          </div>
        </div>
        <!-- Amenities-->
        <div class="text-block">
          <!-- Gallery-->
          <h3 class="mb-4">早餐一览</h3>
          <div class="row gallery ml-n1 mr-n1" >
            <div class="col-lg-4 col-6 px-1 mb-2" th:each="breakfast:${breakfasts}" style="height: 245px;width: 173px">
              <img th:src="@{'/img/breakfast/'+${breakfast.imageName}}" class="img-fluid" style="width: 100%;height: 100%">
              <div style="margin-top: 10px; text-align: center">
                <span th:text="${breakfast.breakfastName}"></span>
              </div>
              </a>
            </div>
          </div>
        </div>

      </div>
      <div class="col-lg-4 right_Details">
        <div class="p-4 shadow ml-lg-4 rounded sticky-top" style="top: 100px;">
          <p class="text-muted"><span class="text-primary h2" th:text="'低至'+${hotel.lowPrize}+'元'" id="bookFormPrize"></span>/ 晚</p>
          <hr class="my-4">
          <form id="booking-form" method="post" action="/book/add" autocomplete="off" class="form" onsubmit="return formValid()">
            <input type="hidden" name="userId" id="userId" th:value="${session.user.userId}">
            <input type="hidden" name="hotelId" id="order_hotelId" th:value="${hotel.hotelId}">
            <input type="hidden" name="orderHotel" id="order_hotelName" th:value="${hotel.hotelName}">
            <!--            <input type="hidden" name="orderPrize" id="order_roomPrize">-->
            <div class="form-group">
              <label for="customerName" class="form-label">房间类型 *</label>
              <div class="datepicker-container datepicker-container-right">
                <input type="hidden" name="roomId" id="roomId">
                <input type="text" name="orderRoom" id="roomType" placeholder="点击选择房间类型" required class="form-control" readonly>
              </div>
            </div>
            <div class="form-group">
              <label for="customerName" class="form-label">入住人姓名 *</label>
              <div class="datepicker-container datepicker-container-right">
                <input type="text" name="customerName" id="customerName" th:value="${session.user.realName}" placeholder="输入入住人姓名" required class="form-control">
              </div>
            </div>
            <div class="form-group">
              <label for="customerTel" class="form-label">联系电话 *</label>
              <div class="datepicker-container datepicker-container-right">
                <input type="number" name="customerTel" id="customerTel" th:value="${session.user.userTel}" placeholder="输入联系电话" required class="form-control">
                <p></p>
              </div>
            </div>
            <div class="form-group">
              <label for="inTime" class="form-label">入住时间 *</label>
              <div class="datepicker-container datepicker-container-right">
                <input type="date" name="stringInTime" id="inTime" placeholder="选择入住时间" required class="form-control">
              </div>
            </div>
            <div class="form-group">
              <button type="submit" class="btn btn-primary btn-block">提交订单</button>
            </div>
          </form>
          <hr class="my-4">
          <div class="text-center">
            <p> <a href="#" class="text-secondary text-sm"> <i class="fa fa-heart"></i> Bookmark This Listing</a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<section class="Categories Campaigns pt80 pb80">
  <div class="container">
    <div class="row mb-5">
      <div class="col-md-8">
        <p class="subtitle text-secondary nopadding" th:text="${hotel.hotelLocation}+的其他酒店"></p>
        <h1 class="paddtop1 font-weight lspace-sm">你可能也喜欢</h1>
      </div>
      <div class="col-md-4 d-lg-flex align-items-center justify-content-end"></div>
    </div>

    <div class="row">
      <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12" th:each="elseHotel:${elseHotels}">
        <div class="ListriBox">
          <figure>
            <a th:href="@{'/hotel/detail?id='+${elseHotel.hotelId}}" class="wishlist_bt"></a>
            <a th:href="@{'/hotel/detail?id='+${elseHotel.hotelId}}"><img th:src="@{'/img/hotel/'+${elseHotel.hotelImageName}}" class="img-fluid" alt="" >
              <div class="read_more"><span>查看详情</span></div>
            </a>
          </figure>
          <div class="ListriBoxmain">
            <h3><a th:href="@{'/hotel/detail?id='+${elseHotel.hotelId}}" th:text="${elseHotel.hotelName}"></a></h3>
            <i class="fa fa-crosshairs"></i>
            <label class="address" th:text="${elseHotel.hotelLocation}"></label>
          </div>
          <ul>
            <li><span th:attr="class=${elseHotel.hotelSign==0?'Rclosed':'Ropen'}" th:text="${elseHotel.hotelSign==0?'暂无空房':'可以预定'}"></span></li>
            <li>
              <div class="R_retings"><span></span><strong  th:text="'￥'+${elseHotel.lowPrize}+元起"></strong></div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>
<div th:replace="/common/frontCommon::footer"></div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script th:src="@{/front-resource/js/jquery.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/popper.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/bootstrap.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/getfund-nav.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/owl.carousel.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/waypoints.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/jquery.counterup.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/swiper.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/custom.js}" type="text/javascript"></script>
<script src="http://ditu.google.cn/maps/api/js?key=AIzaSyCRSEJH8Z2UVyyaAv0TD7MY-IgclK5Izm8&amp;libraries=places&amp;callback=initAutocomplete"></script>
<script th:src="@{/front-resource/js/map_infobox.js}"></script>
<script th:src="@{/front-resource/js/markerclusterer.js}"></script>
<script th:src="@{/front-resource/js/maps.js}"></script>
<script>
  function displayClock(num){
    if(num<10){
      return "0"+num;
    }
    else{
      return num;
    }
  }
  $(function () {
    var time =new Date();
    var years=time.getFullYear()+"-";
    var months=displayClock(time.getMonth()+1)+"-";
    var days=displayClock(time.getDate());
    var ymd=years+months+days;
    $("#inTime").val(ymd);  //入住时间默认选中为当天
    $("#inTime").attr("min",ymd);

    var customerTel_reg=/^1(3|4|5|7|8|9)[0-9]\d{8}$/;
    $("#customerTel").blur(function() {
      var ele = $(this);
      var getValue = ele.val();
      if(customerTel_reg.test(getValue)) {
        ele.attr("style", "color:black");
        ele.next().empty();
      }else {
        ele.attr("style", "color:red");
        ele.next().attr("style", "color:red").html("&nbsp;&nbsp;手机号不合法！请重新输入！");
      }
    });
  });
  function bookRoomInfo(id,type,prize) {
    $("#roomId").val(id);
    $("#roomType").val(type);
    $("#bookFormPrize").text(prize+"元");
    // $("#order_roomPrize").val(prize);
  }
  function formValid() {
    var customerTel_reg=/^1(3|4|5|7|8|9)[0-9]\d{8}$/;
    var ele = $("#customerTel");
    var getValue = ele.val();
    if(customerTel_reg.test(getValue)) {
      ele.attr("style", "color:black");
      ele.next().empty();
      return true;
    }else {
      ele.attr("style", "color:red");
      ele.next().attr("style", "color:red").html("&nbsp;&nbsp;手机号不合法！请重新输入！");
      return false;
    }
  }
</script>
</body>
</html>